<template>
  <el-drawer v-model="drawerVisible" title="搜索" direction="rtl" size="350px">
    <template #header>
      <span class="text-16px font-700">搜索</span>
    </template>
    <div class="search-drawer" style="height: 100%">
      <el-form
        ref="queryFormRef"
        :inline="true"
        :model="queryParams"
        class="-mb-15px"
        label-width="68px"
      >
        <el-form-item label="承运商统一社会信用代码/身份证" prop="carrierUscc">
          <el-input
            v-model="queryParams.carrierUscc"
            placeholder="请输入承运商统一社会信用代码/身份证"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="承运商/车队长名称" prop="carrierName">
          <el-input
            v-model="queryParams.carrierName"
            placeholder="请输入承运商/车队长名称"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="挂车号" prop="trailerNo">
          <el-input
            v-model="queryParams.trailerNo"
            placeholder="请输入挂车号"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="拖车颜色" prop="trailerPlateColor">
          <el-input
            v-model="queryParams.trailerPlateColor"
            placeholder="请输入拖车颜色"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="道路运输证号" prop="transportNo">
          <el-input
            v-model="queryParams.transportNo"
            placeholder="请输入道路运输证号"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="道路运输证URL" prop="transportUrl">
          <el-input
            v-model="queryParams.transportUrl"
            placeholder="请输入道路运输证URL"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="核发机关" prop="approveOrg">
          <el-input
            v-model="queryParams.approveOrg"
            placeholder="请输入核发机关"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="发证日期" prop="transportIssueDate">
          <el-date-picker
            v-model="queryParams.transportIssueDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px"
          />
        </el-form-item>
        <el-form-item label="行驶证正面" prop="trailerLicenseFurl">
          <el-input
            v-model="queryParams.trailerLicenseFurl"
            placeholder="请输入行驶证正面"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="行驶证反面" prop="trailerLicenseBurl">
          <el-input
            v-model="queryParams.trailerLicenseBurl"
            placeholder="请输入行驶证反面"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="所有人" prop="owner">
          <el-input
            v-model="queryParams.owner"
            placeholder="请输入所有人"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="档案编号" prop="archivesNo">
          <el-input
            v-model="queryParams.archivesNo"
            placeholder="请输入档案编号"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="使用性质" prop="useNature">
          <el-input
            v-model="queryParams.useNature"
            placeholder="请输入使用性质"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="核定人数" prop="approveNum">
          <el-input
            v-model="queryParams.approveNum"
            placeholder="请输入核定人数"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="拖车识别号" prop="vin">
          <el-input
            v-model="queryParams.vin"
            placeholder="请输入拖车识别号"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="发动机号" prop="engine">
          <el-input
            v-model="queryParams.engine"
            placeholder="请输入发动机号"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="注册日期" prop="registerDate">
          <el-date-picker
            v-model="queryParams.registerDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px"
          />
        </el-form-item>
        <el-form-item label="发证日期" prop="issueDate">
          <el-date-picker
            v-model="queryParams.issueDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px"
          />
        </el-form-item>
        <el-form-item label="发证机关" prop="issueOrg">
          <el-input
            v-model="queryParams.issueOrg"
            placeholder="请输入发证机关"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="总重量" prop="totalWeight">
          <el-input
            v-model="queryParams.totalWeight"
            placeholder="请输入总重量"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="整备重量" prop="curbWeight">
          <el-input
            v-model="queryParams.curbWeight"
            placeholder="请输入整备重量"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="准牵引重量" prop="trailerTonnage">
          <el-input
            v-model="queryParams.trailerTonnage"
            placeholder="请输入准牵引重量"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="车长" prop="trailerLen">
          <el-input
            v-model="queryParams.trailerLen"
            placeholder="请输入车长"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="车宽" prop="trailerWidth">
          <el-input
            v-model="queryParams.trailerWidth"
            placeholder="请输入车宽"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="车高" prop="trailerHeight">
          <el-input
            v-model="queryParams.trailerHeight"
            placeholder="请输入车高"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="能源类型" prop="energyType">
          <el-select
            v-model="queryParams.energyType"
            placeholder="请选择能源类型"
            clearable
            class="!w-240px"
          >
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="拖车照片" prop="trailerUrl">
          <el-input
            v-model="queryParams.trailerUrl"
            placeholder="请输入拖车照片"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="queryParams.remark"
            placeholder="请输入备注"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="拖车状态" prop="vstatus">
          <el-select
            v-model="queryParams.vstatus"
            placeholder="请选择拖车状态"
            clearable
            class="!w-240px"
          >
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态" prop="authStatus">
          <el-select
            v-model="queryParams.authStatus"
            placeholder="请选择审核状态"
            clearable
            class="!w-240px"
          >
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="queryParams.createTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px"
          />
        </el-form-item>
        <el-form-item label="机构ID" prop="deptId">
          <el-input
            v-model="queryParams.deptId"
            placeholder="请输入机构ID"
            clearable
            class="!w-240px"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'

  // 定义 props 和 emits
  const props = defineProps({
    modelValue: {
      type: Object,
      required: true,
    }
  });

  const emit = defineEmits(['update:modelValue', 'search', 'reset']);

  // 控制抽屉显示
  const drawerVisible = ref(false);

  // 使用 computed 实现双向绑定
  const queryParams = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
  });

  // 打开抽屉
  function open() {
    drawerVisible.value = true;
  }

  // 关闭抽屉
  function close() {
    drawerVisible.value = false;
  }

  // 搜索
  function search() {
    close();
    emit('search', queryParams.value);
  }

  const queryFormRef = ref()
  // 重置
  function reset() {
    queryFormRef.value.resetFields()
    emit('reset', queryParams.value);
  }

  // 暴露 open 方法
  defineExpose({
    open
  });
</script>

<style lang="scss" scoped>
  .search-drawer {
    ::v-deep {
      .el-form {
        height: 98%;
      }
    }
  }
</style>